<template>
  <el-card style="margin-bottom: 1px;">
    <!-- <el-input v-model="" placeholder=""></el-input> -->
    <el-date-picker
        v-model="data.dateTime"
        type="datetimerange"
        start-placeholder="启始日"
        end-placeholder="截止日"
        format="YYYY-MM-DD HH:mm:ss"
        date-format="YYYY/MM/DD ddd"
        time-format="A hh:mm:ss"
        @change="handleDateTimeChange"
      />
    <el-button type="primary" style="margin-left: 20px;" @click="load">搜 索</el-button>
    <el-button type="warning" @click="reset">重 置</el-button>
  </el-card>
  <el-card>
    <el-table :data="data.logs" style="width: 100%" >
      <!-- :formatter="formatter"  -->
      <el-table-column prop="logTime" label="时间" sortable width="180"  />
      <el-table-column prop="logLevel" label="本站服务器">
        <template #default="scope">
          <div class="server-url">{{ scope.row.logLevel }}</div>
        </template>
      </el-table-column>
       <el-table-column prop="logger" label="请求方式" align="center">
        <template #default="{ row }">
          <span :style="{ color: getMessageColor(row.logger) }">{{ row.logger }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="message" label="操作反馈" />
    </el-table>

    <div class="demo-pagination-block">
        <div style="margin-top: 15px"></div>
        <el-pagination v-model:current-page="data.pageNum" @current-change="load" @size-change="load"
            v-model:page-size="data.pageSize" :page-sizes="[10,14,20,30]" background
            layout="total, sizes, prev, pager, next, jumper" :total="data.total">
        </el-pagination>
    </div>

  </el-card>

</template>

<script setup>
import { getLogsInfo } from '@/api/log';
import { ElMessage } from 'element-plus';
import { reactive } from 'vue';



const data = reactive({
  logs: [], //存放所有人的日志信息
  pageNum: 1,
  pageSize: 14,
  total: 0,
  dateTime: [], //开始日期 ---- 截止日期

})

//处理时间
const parseTime = () => {
  const startDate = new Date(data.dateTime[0])

  const startTime = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')} ${String(startDate.getHours()).padStart(2, '0')}:${String(startDate.getMinutes()).padStart(2, '0')}:${String(startDate.getSeconds()).padStart(2, '0')}`
  data.dateTime[0] = startTime // 转换为 --->  2025-03-14 00:00:00 后端可以接收的LocalDateTime

  const endDate = new Date(data.dateTime[1])
  const endTime = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')} ${String(endDate.getHours()).padStart(2, '0')}:${String(endDate.getMinutes()).padStart(2, '0')}:${String(endDate.getSeconds()).padStart(2, '0')}`
  data.dateTime[1] = endTime
}

const getMessageColor = (message) => {

  const requestMethod = {
    'GET': 'green',
    'POST': 'blue',
    'PUT': 'orange',
    'DELETE': 'red'
  }
  for (const [key, color] of Object.entries(requestMethod)) {
    if (message.includes(key)) {
      return color
    }
  }
  return 'black'
}


//时间被选择的 或者被改变的函数
const handleDateTimeChange = () => {
  parseTime()
}

//重置函数
const reset = () => {
  data.dateTime = []
  load()
}


const load = async () => {  
  await getLogsInfo(data.pageNum,data.pageSize,data.dateTime).then(res => {
    if(res.data.code == '200'){
      data.logs = res.data.data.list
      data.total = res.data.data.total
    }else{
      ElMessage.error('系统有误')
    }
  })


}


load()




</script>

<style scoped>


.server-url {
  background-color: #d9edf7; /* 浅蓝色 */
  padding: 2px 5px;
  border-radius: 3px;
}

/* 添加一些样式以增强视觉效果 */
.log-table table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.log-table th,
.log-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.log-table th {
  background-color: #f2f2f2;
}

/* 分页器 */
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

</style>